<template>
  <section>

    <el-form ref="editForm" :model="form" label-width="80px"  :rules="addFormRules" @submit.prevent="onSubmit"
             style="margin:20px;width:60%;min-width:600px;">

      <el-form-item label="新闻图片">
        <div class="p-pic">
          <div class="p-pic-old">
            <el-form-item>
              <el-input type="text" v-model="form.pic" auto-complete="off" width="80px" readonly></el-input>
            </el-form-item>
          </div>
          <div class="p-pic-upload">
            <el-button type="success">上传<i class="el-icon-upload el-icon--right"></i></el-button>
            <span class="upload_plant_pic"><input type="file" name="file" class="cfg_upload_pic" @change="upInputOnchange"></span>
          </div>
          <div class="p-poster"  v-if="form.pic">
            <el-form-item>
              <img :src="form.pic" alt="">
            </el-form-item>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="新闻标题">
        <el-input type="text" v-model="form.title" auto-complete="off" width="80px"></el-input>
      </el-form-item>
      <el-form-item label="新闻来源">
        <el-input type="text" v-model="form.from" auto-complete="off" width="80px"></el-input>
      </el-form-item>
      <el-form-item label="新闻置顶">
        <el-checkbox-group v-model="form.top">
          <el-checkbox label="新闻置顶" name="top"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="新闻简介">
        <el-input type="textarea" v-model="form.desc" :autosize="{ minRows: 5, maxRows: 9}" ></el-input>
      </el-form-item>

      <el-form-item label="新闻详情">
        <editer ref="editer"></editer>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click.native="add">立即创建</el-button>
        <el-button @click.native.prevent>取消</el-button>
      </el-form-item>
    </el-form>

  </section>
</template>

<script type="text/ecmascript-6">
  import util from '../../util'
  import { apiTree } from '../../apiTree'
  import NProgress from 'nprogress'
  import editer from '../common/ueditor'
  import { returnEditerHtml } from '../../vuex/getters'

  export default {
    components: {
      editer
    },
    data() {
      return {
        form: {
          pic: '',
          title: '',
          desc: '',
          detail: '',
          from: '',
          top: ''
        },
        addFormRules: {
          title: [
            {required: true, message: '请输入标题', trigger: 'blur'}
          ],
          desc: [
            {required: true, message: '请输入概述', trigger: 'blur'}
          ]
        },
        fileList: []
      }
    },
    methods: {
      // 上传种子照片
      upInputOnchange(e) {
        var _that = this
        let file = e.target.files[0]
        let _reader = new FileReader()
        _reader.readAsDataURL(file)
        _reader.onload = function() {
          let _file = this.result
          let param = {'file': _file, 'type': 3}
          apiTree('upload/index', 'plant/upload', param, 'POST').then((res) => {
            if (res.s === 1) {
              _that.form.pic = res.d.url
            }
          })
        }
      },
      add: function () {
        this.$refs.editForm.validate((valid) => {
          if (valid) {
            NProgress.start()
            let para = Object.assign({}, this.form)
            this.$refs.editer.$emit('getUeditorContent');
            para.content = returnEditerHtml(this.$store.state)
            if (util.isEmpty(para.content)) {
              this.$message.error('内容为空');
              return
            }
            if (util.isEmpty(para.title)) {
              this.$message.error('标题为空');
              return
            }
            if (util.isEmpty(para.desc)) {
              this.$message.error('描述为空');
              return
            }
            if (util.isEmpty(para.from)) {
              this.$message.error('来源为空');
              return
            }
            if (util.isEmpty(para.pic) || !util.isHttp(para.pic)) {
              this.$message.error('新闻图片错误');
              return
            }
            apiTree('news/index', 'news/add', para, 'POST').then((res) => {
              if (res.s === 1) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
                this.$refs['editForm'].resetFields()
                this.$router.push('/news/index')
              }
            })
          }
        })
      }
    }
  }

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  img
    width: 100%
    height: 100%
  .p-pic
    overflow hidden
    .p-pic-old
      width 430px
      display inline-block
    .p-poster
      width 200px
      height 100px
      margin-top 20px
      overflow hidden
      & img
        width 100%
        height 100%

  .p-pic-upload
    display inline-block
    margin-left 10px
    position relative
    .upload_plant_pic
      display block
      width 80px
      height 35px
      cursor pointer
      position absolute
      top 0px
      left 0px
      opacity 0
      & input[type=file]
        display block
        cursor pointer
        width 80px
        height 35px
</style scoped>
